<template>
  <el-dialog
    title="查看产品模块"
    v-if="visible"
    :visible.sync="visible"
    width="700px"
    top="10vh"
    :append-to-body="true"
    :close-on-click-modal="false"
  >
    <div
      v-if="
        webList.length === 0 &&
        webSpecial.length === 0 &&
        appList.length === 0 &&
        appSpecial.length === 0
      "
    >
      <el-empty></el-empty>
    </div>
    <div style="height: 700px" v-else>
      <el-scrollbar style="height: 100%">
        <el-row>
          <el-col :span="24">
            <el-descriptions title="web端"> </el-descriptions
          ></el-col>
          <el-col :span="20" :offset="2">
            <div style="margin-bottom: 10px; font-weight: 600">通用模块</div>
            <div v-if="webList.length !== 0">
              <el-tag
                v-for="tag in webList"
                :key="tag.productName"
                disable-transitions
                style="margin-right: 10px; margin-top: 5px"
              >
                {{ tag.productName }}{{ "_" + tag.productCode }}
              </el-tag>
            </div>
            <el-empty v-else :image-size="60"></el-empty>
            <div style="margin: 10px 0; font-weight: 600">特殊模块</div>
            <div v-if="webSpecial.length !== 0">
              <el-tag
                v-for="tag in webSpecial"
                :key="tag.productName"
                disable-transitions
                style="margin-right: 10px; margin-top: 5px"
              >
                {{ tag.productName }}{{ "_" + tag.productCode }}
              </el-tag>
            </div>
            <el-empty v-else :image-size="60"></el-empty>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-descriptions title="app端"> </el-descriptions
          ></el-col>
          <el-col :span="20" :offset="2">
            <div style="margin-bottom: 10px; font-weight: 600">通用模块</div>
            <div v-if="appList.length !== 0">
              <el-tag
                v-for="tag in appList"
                :key="tag.productName"
                disable-transitions
                style="margin-right: 10px; margin-top: 5px"
              >
                {{ tag.productName }}{{ "_" + tag.productCode }}
              </el-tag>
            </div>
            <el-empty v-else :image-size="60"></el-empty>
            <div style="margin: 10px 0; font-weight: 600">特殊模块</div>
            <div v-if="appSpecial.length !== 0">
              <el-tag
                v-for="tag in appSpecial"
                :key="tag.productName"
                disable-transitions
                style="margin-right: 10px; margin-top: 5px"
              >
                {{ tag.productName }}{{ "_" + tag.productCode }}
              </el-tag>
            </div>
            <el-empty v-else :image-size="60"></el-empty>
          </el-col>
        </el-row>
      </el-scrollbar>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    checkedNodes: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      filterText: "",
      treeData: [],
      visible: false,
      footer: true,
    };
  },
  computed: {
    webList() {
      return this.checkedNodes.filter(
        (x) => x.productSide == "1" && x.productMoudle == "3"
      );
    },
    webSpecial() {
      return this.checkedNodes.filter(
        (x) => x.productSide == "1" && x.productMoudle == "4"
      );
    },
    appList() {
      return this.checkedNodes.filter(
        (x) => x.productSide == "2" && x.productMoudle == "3"
      );
    },
    appSpecial() {
      return this.checkedNodes.filter(
        (x) => x.productSide == "2" && x.productMoudle == "4"
      );
    },
  },
  methods: {
    init() {
      this.visible = true;
    },
  },
};
</script>
<style lang="scss" scoped></style>
